<!-- 商品分类 -->
<template>
    <div>
        <el-card style="max-width: 100%;" class="card-table">
            <search-box :tableDataInput="tableData" @search="handleSearch"></search-box>
            <el-button class="btn1" @click="showStorageReceiptDialog"><i class="el-icon-plus"
                style="margin-right: 3px;"></i>大类</el-button>

            <el-table :data="selectedItems" style="margin-top: 16px;font-size: 16px;"
                :header-cell-style="{ background: '#EBEEF2' }"
                row-key="id" 
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column prop="catName" label="分类名称" align="center" width="300%"/>
                <el-table-column prop="memo" label="分类说明" align="center" :show-overflow-tooltip="true"/>
                <el-table-column label="操作" width="300%">
                    <template slot-scope="scope">
                        <div>
                            <span @click="addchildren(scope.$index,scope.row)">
                                <i class="el-icon-plus"></i>
                                <span style="margin-left: 4px;">子分类</span>
                            </span>
                            <span @click="edit(scope.$index,scope.row)">
                                <img src="@/assets/edit.svg" class="edit">
                                <span style="margin-left: 4px;">编辑</span>
                            </span>
                            <span @click="deleted(scope.$index,scope.row)">
                                <img src="@/assets/delete.svg" class="delete">
                                <span>删除</span>
                            </span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <TypeAddDialog :dialogVisible="addvisible" @update="addhiddenDialog" @comfirm="comfirm" :parentId="addparentId"></TypeAddDialog>
        <TypeEditDialog :dialogVisible="editvisible" @update="edithiddenDialog" @comfirm="comfirm" :parentId="editparentId"></TypeEditDialog>
    </div>
</template>

<script>
import '@/styles/tableList.css'
import { getlistClass,delClass } from '@/api/api.js'
import TypeAddDialog from '@/views/components/TypeaddDialog.vue'
import TypeEditDialog from '@/views/components/TypeEditDialog.vue'

export default {
    components:{
        TypeAddDialog,
        TypeEditDialog
    },
    data() {
        return {
            addvisible:false,
            editvisible:false,
            selectedItems:[],
            tableData: [],
            addparentId:"-1",
            editparentId:"",
            CatName:""
        }
    },
    async created(){
        await this.getlistClass(this.CatName)
    },
    methods:{
        async getlistClass(CatName){
            try{
                const list = await getlistClass(CatName)
                if(list.data.code == 200) {
                    this.selectedItems = list.data.result;
                    this.tableData = list.data.result;
                    
                }
            }catch(error){
                console.log(error)
            }
        },
        handleSearch(filtered){
            this.CatName = filtered
            this.getlistClass(this.CatName)
        },
        showStorageReceiptDialog(){
            this.addvisible = true;
            this.addparentId = '-1'
        },
        addchildren(index,row){
            this.addparentId = row.id
            this.addvisible = true;
        },
        addhiddenDialog(){
            this.addvisible = false;
        },
        async comfirm(){
            await this.getlistClass(this.CatName)
        },
        edit(index,row){
            console.log(row)
            this.editparentId = row.id
            this.editvisible = true;
        },
        edithiddenDialog(){
            this.editvisible = false;
        },
        deleted(index,row){
            this.$confirm('此操作将永久删除该条商品分类, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delClass(row.id).then((res)=>{
                        if(res.data.code == 200){
                            this.$message({
                                message: '删除成功',
                                type:'success'
                            });
                            this.getlistClass()
                        }
                    })
                }).catch(() => {

                })
        },
    }
}
</script>

<style scoped>

.el-icon-arrow-right:before {
    content: "\e784";
}

.btn1 {
    position: absolute;
    right: 60px;
    opacity: 1;
    border-radius: 80px;
    width: 130px;
    height: 38px;
    color: white;
    font-size: 15px;
    background: rgba(126, 114, 242, 1);
}

.edit {
    width: 13.2px;
    height: 14px;
    position: relative;
    margin-left: 28px;
    top: 2px;
}

.delete {
    width: 13.2px;
    height: 16px;
    position: relative;
    top: 3px;
    margin-left: 28px;
    margin-right: 3px;
}
</style>